<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/cart.css">
</head>
<body>
  <div id="car">
    <ul>
      <li id="title-info">
        <span>商品信息</span>
        <span>商品金额</span>
        <span>商品数量</span>
        <span>总金额</span>
        <span>编辑</span>
      </li>
      <li v-for='list in lists'>
        <div>
          <label><input type="checkbox" name="shop" :checked = 'list.checked' @click="selectedProduct(list)"></label>
        </div>
        <div class="shop-info clearfix">
          <div class="list-img">
            <img :src = "list.productImage" alt="">
          </div>
          <div class="list-info">
            <span>{{list.productName}}</span>
            <ul>
              <li v-for='item in list.parts'>
                {{item.partsName}}
              </li>
            </ul>
          </div> 
        </div>
        <div>
          {{list.productPrice|formatMoney}}
        </div>
        <div>
          <button @click = "add(list)">+</button>
          <label for="quantity"></label>
          <input type="number" id="quantity"  v-model='list.productQuantity'>
          <button @click="minus(list)">-</button>
        </div>
        <div>
          {{list.productQuantity * list.productPrice |formatMoney}}
        </div>
        <div>
          <span  @click="del(list)">删除</span>
        </div>
      </li>
    </ul>
    <div class="bottom">
      <label><input type="checkbox" name="checkall" :checked = "checkedAll" @click='selectAll'>{{checkedAllText}}</label>
      <span>总额： {{totalPrice}}</span>
      <a href="./address.html">结账</a>
    </div>
  </div>
</body>
<script src="./vue.js"></script>
<script src="./vue-resource@1.5.1.js"></script>
<script src="./js/car.js"></script>
</html>